<template>
  <div id="login">
    <div class="wrapper">
      <div class="title">
        <h2>登录</h2>
        <div @click="toRegister"
              style="cursor: pointer">立即注册>></div>
      </div>
      <div class="login-methods">
        <div @click="isAccount = true" :class="{active:isAccount===true}">账号登录</div>
        <div @click="isAccount=false" :class="{active:isAccount===false}">其他方式登录</div>
      </div>
      <div v-if="isAccount" class="input-box">
        <div class="input-wrapper">
          <input v-model="formData.loginStr"
                  placeholder="请输入账号/手机号"></input>
        </div>
        <div class="input-wrapper">
          <input v-model="formData.password"
                 type="password"
                  placeholder="请输入密码">
          </input>
        </div>
        <div class="input-wrapper login-type">
          <el-radio v-model="type" label="buyer">采买方</el-radio>
          <el-radio v-model="type" label="server">服务方</el-radio>
        </div>

      </div>
      <div v-else class="input-box">
        <div class="input-wrapper">
          <input v-model="formData2.phone"
                  placeholder="请输入手机号"></input>
        </div>
        <div class="input-wrapper" style="display: flex">
          <input v-model="formData3.code"
                  placeholder="请输入验证码"></input>
          <el-button plain
                     class="code"
                     @click="getVerifyCode"
                     style="width:80px;height: 40px;line-height: 40px;padding: 0;margin-top: 20px">
            获取</el-button>
        </div>
        <div class="input-wrapper login-type">
          <el-radio v-model="type" label="buyer">采买方</el-radio>
          <el-radio v-model="type" label="server">服务方</el-radio>
        </div>
      </div>
        <el-button round
                   @click="login"
                   class="submit">登录</el-button>
      <div class="forget"><el-link :underline="false" @click="forget = true">忘记密码？</el-link></div>
    </div>
    <el-dialog title="忘记密码"
               :visible.sync="forget"
               append-to-body
               width="700px"
    >
      <forget-password @cancelForget="forget = false"></forget-password>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import ForgetPassword from "../components/content/ForgetPassword";
  export default {
    name: "Login",
    components:{
      ForgetPassword
    },
    data(){
      return{
        isAccount:true,
        isView:false,
        forget : false,
        type:'buyer',
        formData:{
          loginStr:'',
          password:''
        },
        formData2 :{
          phone:'',
          user:''
        },
        formData3:{
          phone: '',
          code:''
        }
      }
    },
    methods:{
      toRegister(){
        this.$router.push('/register')
      },
      login(){
        if(this.isAccount)
        {
            if(this.formData.loginStr.length === 0)
            {
              alert('请填写账户或手机号')
              return ;
            }
            if(this.formData.password === 0)
            {
              alert('请填写密码')
              return;
            }

            let url = ''
          this.type == 'server'? url = '/api/serviceSide/loginWithPass': url='/api/buyer/loginWHtiPw'
            //密码登录
            axios.post('https://haotry.top'+url,JSON.stringify(this.formData),{
              headers:{
                'Content-Type':'application/json'
              }
            }).then(res => {
              let data = res.data
              console.log(data)
              if(data.status === 200){
                //登录成功，跳转到服务方用户中心
                this.$store.commit('setIsLogin',{isLogin:true})
                this.$store.commit('setUserType',{userType:this.type})
                this.$store.commit('setInfo',{info:data.data})

                sessionStorage.setItem('isLogin','1')
                sessionStorage.setItem('userType',this.type)
                sessionStorage.setItem('info',JSON.stringify(data.data))
                this.$store.dispatch('getMessageLength')
                this.type == 'server'?this.$router.push('server/account'):this.$router.push('buyer/account')
              }
              else{
                alert(data.msg)
                return ;
              }
            })

        }
        else {
          //验证码登录
          this.formData3.phone = this.formData2.phone
          if(this.formData3.code.length === 0){
            alert('请填写验证码！')
            return ;
          }
          let url2 = ''
          this.type == 'server'? url2 = '/api/serviceSide/loginByPhoneVerify': url2='/api/buyer/loginWithCode'

          axios.post('https://haotry.top'+url2,JSON.stringify(this.formData3),{
            headers:{
              'Content-Type':'application/json'
            }
          }).then(res => {
            let data = res.data
            if(data.status === 200){
              //登录成功，跳转到服务方用户中心
              this.$store.commit('setIsLogin',{isLogin:true})
              this.$store.commit('setUserType',{userType:this.type})
              this.$store.commit('setInfo',{info:data.data})

              sessionStorage.setItem('isLogin','1')
              sessionStorage.setItem('userType',this.type)
              sessionStorage.setItem('info',JSON.stringify(data.data))
              this.$store.dispatch('getMessageLength')
              this.type == 'server'?this.$router.push('server/account'):this.$router.push('buyer/account')
            }
            else{
              alert(data.msg)
              return;
            }
          })
        }
      },

      //获取验证码
      getVerifyCode(){
        console.log('获取验证码')
        this.type === 'buyer'?this.formData2.user = 'BUYER':this.formData2.user = 'SERVICE'

        let reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$")
        if (!this.formData2.phone && !reg.test(this.formData2.phone)) {
          alert("请填写正确的手机号码!");
          return;
        }

        console.log(this.formData2)
        axios.post('https://haotry.top/api/verify/loginPhoneVerification',JSON.stringify(this.formData2),{
          headers:{
            'Content-Type':'application/json'
          }
        }).then(res => {
          console.log(res)
          alert('验证码已发送，注意查收！')
        })
      }
    }
  }
</script>

<style scoped>
  #login{
    /*width: 100vw;*/
    background-image: url("../assets/images/背景.jpg");
    background-size: 100% 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .wrapper{
    padding: 40px;
    width: 30%;
    height: 550px;
    border-radius: 10px;
    border: 2px solid #3a8ee6;
    background-color: #fff;
  }
  .title{
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    align-items: center;
  }
  .login-methods{
    display: flex;
    /*justify-content: center;*/
  }
  .login-methods div{
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    border-bottom: 1px solid #bbb6b6;
    cursor: pointer;
  }
  .login-methods .active{
    border-bottom: none;
    border-bottom: 1px solid #A9282E;
    color: #A9282E;
  }
  .login-methods div:first-child{
    text-align: left;
    margin-right: 5px;
  }
  .login-methods div:last-child{
    text-align: right;
    margin-left: 5px;
  }
  .input-box{
    /*height: 210px;*/
  }
  .input-wrapper{
    border-bottom: 1px solid #bbb6b6;
    height: 70px;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .login-type{
    text-align: left;
    line-height: 70px;
    font-size: 20px;
  }
  input{
    width: 100%;
    height: 45px;
    border: none;
    font-size: 18px;
    border-radius: 5px;
  }
  input:focus{
    border: none;
    outline: none;
  }
  .submit{
    width: 100%;
    margin-top: 30px;
    height: 60px;
    font-size: 20px;
  }
  .submit,.code{
    background-color: #A9282E !important;
    color: #fff !important;
  }
  .submit:hover,.submit:focus,.code:hover,.code:focus{
    background-color: #A9282E;
    color: #fff !important
  }
  .view{
    background-color:#ffffff !important;
    border-color: #fff !important;
    font-size: 20px;
  }
  /deep/.el-radio__input.is-checked .el-radio__inner{
    border-color: #A9282E;
    background: #A9282E;
    color: #A9282E;
  }
  /deep/.el-radio__input.is-checked+.el-radio__label{
    color: #A9282E;
  }
  .forget{
    /*width: 100%;*/
    /*padding: 40px;*/
    text-align: right;
    margin-top: 10px;
    color: #666666;
    /*justify-content: flex-end;*/
  }
</style>